<template>
  <div class="wrapper">
    <div class="title" style="font-size: 25px; font-weight: bold;height: 5vh;text-align: center;margin-top: 15vh;">兼职发布
    </div>
    <div class="content">
      <div class="item" style="margin-top: 2vh;">
        <div> 薪&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;酬:</div>
        <input ref="salary" type="text" style="outline: none; border: 0;">
      </div>
      <div class="item">
        <div>开始时间:</div>
        <input ref="startDate" type="datetime-local" placeholder="薪酬">
      </div>
      <div class="item">
        <div> 截止时间:</div>
        <input ref="endDate" type="datetime-local" placeholder="薪酬">
      </div>
      <div class="item">
        <div>联系方式:</div>
        <input :value="address.phone" ref="phone" type="text">
      </div>

      <div class="item">
        <div>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:</div>
        <select v-model="selectedGrade" class="grade-select">
          <option class="opo" value="">请选择年级</option>
          <option class="opo" v-for="grade in grades" :key="grade" :value="grade">{{ grade }}</option>
        </select>
      </div>
      <div style="" class="item">
        <div>科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目:</div>
        <select v-model="selectedSubject" class="subject-select">
          <option class="opo" value="">请选择科目</option>
          <option class="opo" v-for="subject in subjects" :key="subject" :value="subject">{{ subject }}</option>
        </select>
      </div>
      <div class="item">
        <div>教学要求:</div>
        <div ref="demand"
          style="width: 50vw;height: fit-content;margin-left:2vw;min-height:24px;background-color: #fff;border: 0;outline: none;color: black;border-radius: 4px;font-size: 13px;"
          contenteditable="true">
        </div>
      </div>
      <div class="item">
        <div>详细地址:</div>
        <div
          style="width: 50vw;height: fit-content;margin-left:2vw;min-height:24px;background-color: #fff;border: 0;outline: none;color: black;border-radius: 4px;font-size: 13px;"
          contenteditable="true"> {{
            address.street
          }}
        </div>
      </div>
      <div class="issue" @click="insertOrder()" style="text-align: center;">
        点击发布
      </div>
    </div>
  </div>
</template>

<script>
import settings from '../../settings.json'
import axios from 'axios';
export default {
  name: "Test",
  created() {
    this.BASE_URL = settings.ipAddress
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    let cd = JSON.parse(localStorage.getItem("currentAddress"))
    this.address = {
      shen: cd.shen.slice(0, -1),
      shi: cd.shi.slice(0, -1),
      xian: cd.xian.slice(0, -1),
      street: cd.street,
      phone: this.user.phone
    }
    console.log(this.address);

  },
  data() {
    return {
      BASE_URL: '',
      selectedGrade: '',
      grades: [
        '小学一年级', '小学二年级', '小学三年级', '小学四年级', '小学五年级', '小学六年级',
        '初一', '初二', '初三', '高一', '高二', '高三'
      ],
      selectedSubject: '',
      subjects: [
        '语文', '数学', '英语', '科学', '道德与法治', '音乐', '体育', '美术', '信息技术',
        '历史', '地理', '生物', '物理', '化学'
      ],
      user: null,
      address: null,
    };
  },
  props: {},
  methods: {
    async insertOrder() {
      let salary = this.$refs.salary.value
      let startDate = this.$refs.startDate.value
      let endDate = this.$refs.endDate.value
      let phone = this.$refs.phone.value
      let demand = this.$refs.demand.innerText
      if (startDate === '' || startDate === null) {
        alert('请输入开始日期');
        return;
      }
      if (endDate === '' || endDate === null) {
        alert('请输入结束日期');
        return;
      }
      if (salary === '' || salary === null) {
        alert('请输入薪资');
        return;
      }
      if (phone === '' || phone === null) {
        alert('请输入电话号码');
        return;
      }
      let order = {
        startDate: startDate,
        endDate: endDate,
        salary: salary,
        parent: this.user.username,
        tutor: null,
        phone: this.address.phone,
        isOrder: 0,
        shen: this.address.shen,
        demand: demand,
        shi: this.address.shi,
        xian: this.address.xian,
        street: this.address.street,
        subject: this.selectedSubject,
        grade: this.selectedGrade,
        comment: null
      }
      console.log(order)
      await axios.post(`${this.BASE_URL}/order/insert`, order).then(res => {
        alert('发布成功');
      }).catch(error => {
        alert('发布失败');
      })

    },

    async getByParent() {
      try {
        const response = await axios.get(`${this.BASE_URL}/byParent`, {
          params: { parent: this.parent }
        });
        console.log('根据 parent 查询结果:', response.data);
      } catch (error) {
        console.error('根据 parent 查询订单时出错:', error);
      }
    },
    async getByTutor() {
      try {
        const response = await axios.get(`${this.BASE_URL}/byTutor`, {
          params: { tutor: this.tutor }
        });
        console.log('根据 tutor 查询结果:', response.data);
      } catch (error) {
        console.error('根据 tutor 查询订单时出错:', error);
      }
    },
    async getByShiXianLike() {
      try {
        const response = await axios.get(`${this.BASE_URL}/byShiXianLike`, {
          params: { shi: this.shi, xian: this.xian }
        });
        console.log('根据 shi 和 xian 模糊查询结果:', response.data);
      } catch (error) {
        console.error('根据 shi 和 xian 模糊查询订单时出错:', error);
      }
    },
    async deleteById() {
      try {
        const response = await axios.delete(`${this.BASE_URL}/delete/${this.orderIdToDelete}`);
        console.log('订单删除成功', response.data);
      } catch (error) {
        console.error('根据 id 删除订单时出错:', error);
      }
    },
    async getInvalidAppointments() {
      try {
        const response = await axios.get(`${this.BASE_URL}/invalidAppointments`, {
          data: this.invalidOrder
        });
        console.log('无效预约查询结果:', response.data);
      } catch (error) {
        console.error('查询无效预约时出错:', error);
      }
    },
    async updateComment() {
      try {
        const response = await axios.post(`${this.BASE_URL}/updateComment/${this.orderIdToUpdate}`, this.updatedOrder);
        console.log('评论修改成功', response.data);
      } catch (error) {
        console.error('修改 comment 时出错:', error);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  background-color: rgba($color: #ffffff, $alpha: 1);


  .content {
    // margin-top: 15vh;
    width: 90vw;
    height: fit-content;
    color: #ffffff;
    background-color: rgb(130, 179, 134);
    // background-color: rgba($color: #1eff05, $alpha: 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    border-radius: 8px;


    .item {
      margin-top: 2vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 10vw;
    }

    input {
      width: 50vw;
      height: 22px;
      border-radius: 18px;
      border: 0;
      outline: none;
      margin-left: 2vw;
    }

    select {
      font-size: 16px;
      // border: 2px solid #ccc;
      border: 0;
      margin-left: 2vw;
      border-radius: 18px;
      outline: none;
      width: 50vw;
      height: 24px;
      font-size: 14PX;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      cursor: pointer;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path d="M6 6L0 0h12z"/></svg>');
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px 6px;

      .opo {
        font-size: 14px;
        background-color: #e91414;
      }
    }

    .issue {
      margin-top: 2vh;
      margin-bottom: 2vh;
      margin-left: 30vw;
      border-radius: 4px;
      height: 28px;
      line-height: 28px;
      width: 30vw;
      font-size: 16px;
      color: #ffffff;
      background-color: rgba($color: #148c44, $alpha: 1);
      // background-color: rgb(61, 198, 74);
    }

  }

  // .content {
  //   border-radius: 8px;
  //   text-align: center;

  //   background-color: rgba($color: #3330eb, $alpha: 1);
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: space-around;
  //   align-items: center;

  //   div {
  //     width: 90vw;
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;

  //     div {
  //       width: 70px;

  //       font-size: 16px;
  //     }

  //     input {
  //       width: 200px;
  //       height: 20px;
  //       list-style: none;
  //       background-color: #ffffff;
  //       color: #0f0f0f;
  //     }
  //   }

  //   .title {
  //     height: 60px;
  //     width: 200px;
  //     line-height: 60px;
  //     text-align: center;
  //     border-radius: 12px;
  //     font-size: 30px;
  //     color: #ffffff;
  //   }

  //   .issue {
  //     font-size: 22px;
  //     color: #f8ff22;
  //     background-color: rgb(198, 209, 200);
  //   }

  //   .issue:hover {
  //     background-color: rgb(166, 248, 191);
  //   }

  // }

}
</style>